

// 留言板
// 提交留言
// 显示留言 (删除和修改)

import React, { Component } from 'react';

class Todolist1 extends Component {
    state = {
        list:[
            {
                title:'Vue',
                content:"Vue is so easy"
            },
            {
                title:'Node',
                content:"Node is so c无聊"
            },
            {
                title:'React',
                content:"React is so 火热"
            },
            {
                title:'原生',
                content:"Vue is so 变态"
            },
            {
                title:'Css',
                content:"Css is so 烦躁"
            }
        ]
    }

    addToList=()=>{
        var title = this.title.value;
        var content = this.content.value;
        if(title&&content){
            // unshift 动画无效 
            this.state.list.push({
                title,
                content
            })
            this.setState({
                list:this.state.list 
            })
            this.title.value = ""
            this.content.value = ""
        }else{
            alert("请输入数据")
        }   
    }

    deleteOne=(l,i)=>{
        // this.state.list.splice(i,1)
        // this.setState({
        //     list:this.state.list 
        // })
        this['item'+i].className = 'zoomOutDown'
        setTimeout(()=>{
            this.state.list.splice(i,1)
            this.setState({
                list:this.state.list 
            })
            this['item'+i]&&(this['item'+i].className = 'item')
        },799)
    }

    updateOne=(l,i)=>{
        let value = window.prompt(l.title,l.content)
        console.log(value)
        if(value && value!=l.content){
            this.state.list.splice(i,1,{...l,content:value})
            this.setState({
                list:this.state.list 
            })
            this['item'+i].className = 'tada'
            setTimeout(()=>{
                this['item'+i].className = 'item'  
            },500)
        }
    }
    render() {
        const {list} = this.state
        return (
            <div>
                <h2>React 实现简单 的 留言板  </h2>
                <div style={{padding:10, margin:'20px auto',width:'92%',border:'1px solid green',borderRadius:10,minHeight:150}}>
                    <h2 style={{textAlign:'center'}}>展示留言</h2>
                    <div className='list'>
                        {
                            list.map((l,i)=>(
                                <div className="item zoomInDown" ref={el=>this['item'+i]=el  }   key={i} style={{ animationDelay:i*0+'ms', marginTop:10,borderBottom:'1px solid #eee'}}>
                                    <p>序号: {i+1}</p>
                                    <p>标题: {l.title}</p>
                                    <p>内容: {l.content}</p>
                                    <p>
                                        <button onClick={()=>this.deleteOne(l,i)}>删除</button>
                                        <button onClick={()=>this.updateOne(l,i)}>修改</button>
                                    </p>
                                </div>
                            ))
                        }
                    </div>
                </div>

                <div style={{padding:10, margin:'20px auto',width:'92%',border:'1px solid red',borderRadius:10,minHeight:150}}>
                    <h2 style={{textAlign:'center'}}>添加留言</h2>
                    <div>
                        <p>
                            <input type="text" ref={el=>this.title=el} placeholder="请输入标题" />
                        </p>
                        <p>
                            <input type="text" ref={el=>this.content=el} placeholder="请输入内容" />
                        </p>
                        <p>
                            <button onClick={this.addToList }>添加</button>
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Todolist1;
